<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
    	body{

    	}
    	.swiper-slide{
    		width:98%;
    		height:3rem;
    		text-align:center;
    		line-height: 3rem;
    		background:#f5f5f5;
    		border:1px solid #dddddd
    	}
    	.active{
    		background:white;
    		border:none;
    		color:red
    	}
    </style>
</head>
<body>
	<div class="swiper-slide active" onclick="choose(0)">热门</div>
    <div class="swiper-slide" onclick="choose(1)">A</div>
    <div class="swiper-slide" onclick="choose(2)">B</div>
    <div class="swiper-slide" onclick="choose(3)">C</div>
    <div class="swiper-slide" onclick="choose(4)">D</div>
    <div class="swiper-slide" onclick="choose(5)">E</div>
    <div class="swiper-slide" onclick="choose(6)">F</div>
    <div class="swiper-slide" onclick="choose(7)">G</div>
    <div class="swiper-slide" onclick="choose(8)">H</div>
    <div class="swiper-slide" onclick="choose(9)">I</div>
    <div class="swiper-slide" onclick="choose(10)">J</div>
    <div class="swiper-slide" onclick="choose(11)">K</div>
    <div class="swiper-slide" onclick="choose(12)">L</div>
    <div class="swiper-slide" onclick="choose(13)">M</div>
    <div class="swiper-slide" onclick="choose(14)">N</div>
    <div class="swiper-slide" onclick="choose(15)">O</div>
    <div class="swiper-slide" onclick="choose(16)">P</div>
    <div class="swiper-slide" onclick="choose(17)">Q</div>
    <div class="swiper-slide" onclick="choose(18)">R</div>
    <div class="swiper-slide" onclick="choose(19)">S</div>
    <div class="swiper-slide" onclick="choose(20)">T</div>
    <div class="swiper-slide" onclick="choose(21)">U</div>
    <div class="swiper-slide" onclick="choose(22)">V</div>
    <div class="swiper-slide" onclick="choose(23)">W</div>
    <div class="swiper-slide" onclick="choose(24)">X</div>
    <div class="swiper-slide" onclick="choose(25)">Y</div>
    <div class="swiper-slide" onclick="choose(26)">Z</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	var headerH,wordsW,listW,listH;
	var productType;
	apiready = function(){
		productType = api.pageParam.productType;

		headerH = api.pageParam.headerH;
		wordsW = api.pageParam.wordsW;
		listW = api.pageParam.listW;
		listH = api.pageParam.listH;
		api.openFrame({
            name: 'gameList',
            url: 'gamesList.html',
            rect: {
                x:wordsW,
                y:headerH,
                w:listW,
                h:listH
            },
            pageParam:{
            	chooseLetter:$api.text($api.domAll('div')[0]),
            	productType:productType,
            }
        });
	};
	function choose(index){
		var buttons = $api.domAll('.swiper-slide');

		for(var i=0;i<buttons.length;i++){
			if(i == index){
				api.closeFrame({
					name:'gameList'
                });
				$api.addCls(buttons[i], 'active');
				api.openFrame({
	                name: 'gameList',
	                url: 'gamesList.html',
	                rect: {
		                x:wordsW,
		                y:headerH,
		                w:listW,
		                h:listH
	                },
	                pageParam:{
	                	chooseLetter:$api.text($api.domAll('div')[i]),
	                	productType:productType,
	                }
                });
			}else{
				$api.removeCls(buttons[i], 'active');
			}
		}
	}
</script>
</html>
